﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>计算器</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="shortcut icon" href="/img/favicon.png">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/homelayout.css">
    <script type="text/javascript" src="js/zepto.js"></script>
    <!-- <script type="text/javascript" src="js/jquery.js"></script> -->

    <style>
        .linkA {
            color: #666;
        }

        .linkA:hover {
            color: #666;
            cursor: pointer;
        }

        #loginFrm {
            padding-top: 20px;
        }

        #back{
            color: #f00;
            font-weight: bold;
        }

        #zhuan{
            color: #5ee89d;
            font-weight: bold;
        }

        #show{
            display: none;
        }
        #tx{
            width: 50px;
            height: 50px;
            background-color: #f00;
            float: left;
            border-radius: 25px;
            background-image: url("./picture/tx.jpg");
            background-repeat: no-repeat;
            background-size: contain;
        }
    </style>
</head>

<body class="mobile">
    <div class="wrapper">
        <!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
        <link rel="stylesheet" type="text/css" href="css/login.css">

        <div class="wrapper">
            <div class="main-banner">
                <img src="picture/user-banner.jpg">
            </div>
            <div class="main-center">
                <div id="tx"></div>
                <h1>蓝胖子计算器</h1>
                <div class="main-form-container">
                    <form id="loginFrm" role="form" method="post">
                        <div class="form-group">
                            <input type="number" class="form-control" name="username" id="money" placeholder="金额">
                            <!-- <i class="icon icon-user"></i> -->
                            <!-- 错误信息 popover -->
                            <div class="err-popover-out">
                                <div class="err-popover">
                                    <div class="tri-right"></div>
                                    <div class="tri-right-in"></div>
                                    <div class="err-popover-content"></div>
                                </div>
                            </div>
                            <!-- 错误信息 popover end -->
                        </div>
                        <div class="form-group">
                            <input type="number" class="form-control" id="point" name="password" placeholder="点数">
                            <!-- <i class="icon icon-lock"></i> -->
                            <!-- 错误信息 popover -->
                            <div class="err-popover-out">
                                <div class="err-popover">
                                    <div class="tri-right"></div>
                                    <div class="tri-right-in"></div>
                                    <div class="err-popover-content"></div>
                                </div>
                            </div>
                            <!-- 错误信息 popover end -->
                        </div>
                        <p id="show">给回顾客[<span id="back">10</span>]元 | 利润[<span id="zhuan">1</span>]元</p>
                        <button type="button" id="submit" class="btn btn-blue form-control"><span>计算</span></button>
                    </form>
                </div>
            </div>
</body>
<script>
    $('#submit').click(function(){
        var money = $('#money').val().trim();
        var point = $('#point').val().trim()/100;
        var gitBack = money-(money*point);
        var zhuan = money*point;
        $('#back').html(` ${gitBack} `);
        $('#zhuan').html(` ${zhuan} `);
        $('#show').css('display','block');
    })
</script>
</html>